<template>
  <div>
    <div class="fcRightBox">
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div>
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="文字类" name="first">
                <div class="headerBox">
                  <a class="headerBtn" @click.stop="form.charactersClassType='自定义创建';queryList()"
                     :class="form.charactersClassType=='自定义创建'?'btnOn ':''">自定义创建</a>
                  <a class="headerBtn" @click.stop="form.charactersClassType='自动生成';queryList()"
                     :class="form.charactersClassType=='自动生成'?'btnOn ':''" style="border-color: transparent">自动生成</a>
                </div>
                <div v-if="form.charactersClassType=='自定义创建'">
                  <div style="display: flex" class="one-alert one-alert-info one-alert-medium one-alert-no-title one-alert-show-icon">
                    <span style="margin-top: 3px"
                      class="one-alert-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                  min-width="16" height="16" class="dls-icon one-alert-title-icon"
                                                  focusable="false"><path fill="currentColor" fill-rule="evenodd"
                                                                          d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm12.25-4.15a1.25 1.25 0 1 0-2.5 0 1.25 1.25 0 0 0 2.5 0zM11 17.4v-7h2v7h-2z"
                                                                          clip-rule="evenodd"></path></svg></span>
                    <div>
                      <div class="one-alert-content">文字类创意组件-自定义创建将下线，不支持新建、编辑，存量物料不可继续投放</div>
                    </div>
                  </div>
                  <div class="contentHeader"  style="margin-top: 20px">
                    <div
                        style="
                      width: 340px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                    >
                      <el-button class="buttonDis" @click="btnXiu" disabled
                      >新建文字类组件
                      </el-button
                      >
                    </div>
                    <div
                        style="
                      width: 360px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                    >
                      <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                          style="width: 250px"
                          size="small"
                          @change="queryList"
                          v-model="timerArray"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions"
                          :clearable="false"
                          range-separator="~"
                          type="daterange"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                      ></el-date-picker>

                      <el-button class="buttonBtn" @click="handleTabClick"
                      >重置列宽
                      </el-button
                      >
                    </div>
                  </div>
                  <el-table border
                      :data="tableList"
                      style="width: 100%; background: #ebedf5"
                      :default-sort="{ prop: 'date', order: 'descending' }"
                  >
                    <el-table-column
                        type="selection"
                        min-width="55"
                    ></el-table-column>
                    <el-table-column
                        prop="assembly"
                        label="组件"
                        sortable
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="charactersType"
                        label="	类型"
                        sortable
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="device"
                        label="投放设备"
                        min-width="200"
                    ></el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态"
                        sortable
                        min-width="180"
                    ></el-table-column>
                    <el-table-column prop="toShow" label="展现"></el-table-column>
                    <el-table-column
                        prop="click"
                        label="点击"
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="consumption"
                        label="消费"
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="clickRate"
                        label="点击率"
                        min-width="180"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.clickRate}}%  </template>
                    </el-table-column>
                    <el-table-column
                        prop="avgClickPrice"
                        label="平均点击价格"
                        min-width="180"
                    ></el-table-column>

                  </el-table>
                </div>
                <div v-else>
                  <div class="contentHeader"  style="margin-top: 20px">
                    <div
                        style="
                      width: 340px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between; ">
                    </div>
                    <div
                        style="
                      width: 360px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                    >
                      <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                          style="width: 250px"
                          size="small"
                          @change="queryList"
                          v-model="timerArray"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions"
                          :clearable="false"
                          range-separator="~"
                          type="daterange"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                      ></el-date-picker>

                      <el-button class="buttonBtn" @click="handleTabClick"
                      >重置列宽
                      </el-button
                      >
                    </div>
                  </div>
                  <el-table border
                      :data="tableList"
                      style="width: 100%; background: #ebedf5"
                      :default-sort="{ prop: 'date', order: 'descending' }"
                  >
                    <el-table-column
                        type="selection"
                        min-width="55"
                    ></el-table-column>

                    <el-table-column
                        prop="charactersType"
                        label="	类型"
                        sortable
                        min-width="180"
                    ></el-table-column>

                    <el-table-column
                        prop="status"
                        label="状态"
                        sortable
                        min-width="180"
                    ></el-table-column>
                    <el-table-column prop="toShow" label="展现"></el-table-column>
                    <el-table-column
                        prop="click"
                        label="点击"
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="consumption"
                        label="消费"
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="clickRate"
                        label="点击率"
                        min-width="180"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.clickRate}}%  </template>
                    </el-table-column>
                    <el-table-column
                        prop="avgClickPrice"
                        label="平均点击价格"
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="effectiveScope"
                        label="生效范围"
                        min-width="200"
                    ></el-table-column>
                  </el-table>
                </div>
                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="营销类" name="second">
                <div class="headerBox">
                  <a class="headerBtn" @click.stop="form.marketingType='电话';queryList()"
                     :class="form.marketingType=='电话'?'btnOn ':''">电话</a>
                  <a class="headerBtn" @click.stop="form.marketingType='咨询';queryList()"
                     :class="form.marketingType=='咨询'?'btnOn ':''">咨询</a>
                  <a class="headerBtn" @click.stop="form.marketingType='营销';queryList()"
                     :class="form.marketingType=='营销'?'btnOn ':''">营销</a>
                  <a class="headerBtn" @click.stop="form.marketingType='表单';queryList()"
                     :class="form.marketingType=='表单'?'btnOn ':''">表单</a>
                  <a class="headerBtn" @click.stop="form.marketingType='自定义表单';queryList()"
                     :class="form.marketingType=='自定义表单'?'btnOn ':''" style="border-color: transparent">自定义表单</a>
                </div>

                  <div v-if="form.marketingType=='电话'" class="contentHeader"  style="margin-top: 20px">
                    <div style=" width: 230px;display: flex;align-content: center;justify-content: space-between;">
                      <el-button class="buttonAdd" @click="btnXiu" >新建电话方案</el-button>
                      <el-button class="buttonBtn" @click="btnXiu">线索追踪</el-button>
                    </div>
                  </div>

                <div v-if="form.marketingType=='咨询'" class="contentHeader"  style="margin-top: 20px">
                  <div style=" width: 230px;display: flex;align-content: center;justify-content: space-between;">
                    <el-button class="buttonAdd" @click="btnXiu" >新建咨询方案</el-button>
                  </div>
                </div>

                <div v-if="form.marketingType=='营销'" class="contentHeader"  style="margin-top: 20px">
                  <div style=" width: 230px;display: flex;align-content: center;justify-content: space-between;">
                    <el-button class="buttonAdd" @click="btnXiu" >新建营销组件</el-button>
                  </div>
                </div>

                <div v-if="form.marketingType=='表单'" class="contentHeader"  style="margin-top: 20px">
                  <div style=" width: 230px;display: flex;align-content: center;justify-content: space-between;">
                    <el-button class="buttonAdd" @click="btnXiu" >新建表单页方案</el-button>
                  </div>
                </div>

                <div v-if="form.marketingType=='自定义表单'" class="contentHeader"  style="margin-top: 20px">
                  <div style=" width: 230px;display: flex;align-content: center;justify-content: space-between;">
                    <el-button class="buttonAdd" @click="btnXiu" >+新建自定义表单</el-button>
                    <el-button class="buttonBtn" @click="btnXiu">线索追踪</el-button>
                  </div>
                </div>

                <el-table border
                      :data="tableList"
                      style="width: 100%; background: #ebedf5"
                      :default-sort="{ prop: 'date', order: 'descending' }"
                  >
                    <el-table-column
                        type="selection"
                        min-width="55"
                    ></el-table-column>
                    <el-table-column
                        prop="marketingType"
                        label="电话方案名称" v-if="form.marketingType=='电话'"
                        sortable
                        min-width="180"
                    ></el-table-column>
                    <el-table-column v-if="form.marketingType=='咨询'"
                        prop="componentScheme"
                        label="咨询方案"
                        sortable
                        min-width="180"
                    ></el-table-column>
                    <el-table-column v-if="form.marketingType=='营销'"
                                     prop="marketingType"
                                     label="营销组件"
                                     sortable
                                     min-width="180"
                    ></el-table-column>
                    <el-table-column v-if="form.marketingType=='营销'"
                                     prop="assembly"
                                     label="组件类型"
                                     sortable
                                     min-width="180"
                    ></el-table-column>
                    <el-table-column v-if="form.marketingType=='营销'"
                                     prop="consultationPage"
                                     label="智能咨询页"
                                     sortable
                                     min-width="180"
                    ></el-table-column>
                    <el-table-column v-if="form.marketingType=='表单'"
                                     prop="marketingType"
                                     label="表单页组件"
                                     sortable
                                     min-width="180"
                    ></el-table-column>
                    <el-table-column v-if="form.marketingType=='咨询'||form.marketingType=='电话'"
                        prop="charactersType"
                        label="	组件文案"
                        sortable
                        min-width="180"
                    ></el-table-column>
                    <el-table-column v-if="form.marketingType=='自定义表单'"
                                     prop="marketingType"
                                     label="自定义表单组件"
                                     sortable
                                     min-width="180"
                    ></el-table-column>
                    <el-table-column v-if="form.marketingType=='自定义表单'"
                                     prop="assembly"
                                     label="表单页名称"
                                     sortable
                                     min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态"
                        sortable
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="range"
                        label="投放范围"
                        min-width="200"
                    ></el-table-column>

                  </el-table>

                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="商品类" name="third">
                <div class="contentHeader">
                  <div
                      style="
                      width: 340px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                  >
                    <el-button class="buttonAdd" @click="btnXiu"
                    >新建商品类组件
                    </el-button
                    >
                    <el-input
                        placeholder="请输入商品类组件名称"
                        style="width: 200px"
                        v-model="form.goodsType"
                        @change="queryList"
                    ></el-input>

                  </div>
                  <div
                      style="
                      width: 460px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                  >
                    <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                        style="width: 250px"
                        size="small"
                        @change="queryList"
                        v-model="timerArray"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        range-separator="~"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>

                    <el-button class="buttonBtn" @click="handleTabClick"
                    >重置列宽
                    </el-button
                    >
                    <el-select
                        style="width: 90px"
                        v-model="value"
                        placeholder="请选择"
                        class="select-with-prefix1"
                    >
                      <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <el-table border
                    :data="tableList"
                    style="width: 100%; background: #ebedf5"
                    :default-sort="{ prop: 'date', order: 'descending' }"
                >
                  <el-table-column
                      fixed
                      type="selection"
                      min-width="55"
                  ></el-table-column>
                  <el-table-column
                      fixed
                      prop="applicationComponents"
                      label="商品类组件"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="status"
                      label="状态"
                  ></el-table-column>
                  <el-table-column
                      prop="applicationName"
                      label="创意生成率"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="version"
                      label="投放范围"
                      sortable
                      min-width="180"
                  ></el-table-column>

                  <el-table-column
                      prop="channelPackageName"
                      label="	投放商品组"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="source"
                      label="所属商品目录"
                  ></el-table-column>
                  <el-table-column
                      prop="applicationType"
                      label="推广设备"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="toShow"
                      label="展现"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="click"
                      label="	点击"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="avgClickPrice"
                      label="平均点击价格"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="clickRate"
                      label="	点击率"
                      sortable
                      min-width="180"
                  ></el-table-column>
                </el-table>

                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="应用类 " name="four">
                <div class="contentHeader">
                  <div
                      style="
                      width: 340px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                  >
                    <el-button class="buttonAdd" @click="btnXiu"
                    >应用绑定管理
                    </el-button
                    >
                    <el-input
                        placeholder="请搜索应用名称"
                        style="width: 200px"
                        v-model="form.applicationName"
                        @change="queryList"
                    >  <i slot="suffix" class="el-input__icon el-icon-search"></i></el-input>

                  </div>
                  <div
                      style="
                      width: 360px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                  >
                    <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                        style="width: 250px"
                        size="small"
                        @change="queryList"
                        v-model="timerArray"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        range-separator="~"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>

                    <el-button class="buttonBtn" @click="handleTabClick"
                    >重置列宽
                    </el-button
                    >
                  </div>
                </div>
                <el-table border
                    :data="tableList"
                    style="width: 100%; background: #ebedf5"
                    :default-sort="{ prop: 'date', order: 'descending' }"
                >
                  <el-table-column
                      fixed
                      type="selection"
                      min-width="55"
                  ></el-table-column>
                  <el-table-column
                      fixed
                      prop="applicationComponents"
                      label="应用类组件"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="componentsType"
                      label="	组件类型"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="status"
                      label="状态"
                  ></el-table-column>
                  <el-table-column
                      prop="applicationName"
                      label="应用名称"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="version"
                      label="版本"
                      sortable
                      min-width="180"
                  ></el-table-column>

                  <el-table-column
                      prop="channelPackageName"
                      label="	渠道包名称"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="source"
                      label="来源"
                  ></el-table-column>
                  <el-table-column
                      prop="applicationType"
                      label="类型"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="promotionPlan"
                      label="	推广计划"
                      sortable
                      min-width="180"
                  ></el-table-column>

                  <el-table-column
                      prop="promotionUnit"
                      label="	推广单元"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="consumption"
                      label="消费"
                  ></el-table-column>
                  <el-table-column
                      prop="toShow"
                      label="展现"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="click"
                      label="	点击"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="avgClickPrice"
                      label="平均点击价格"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="clickRate"
                      label="	点击率"
                      sortable
                      min-width="180"
                  ></el-table-column>
                </el-table>

                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="本地类 " name="five">
                <a
                    class="one-tabs-tab-item-is-active"
                    href="/fc/managecenter/dashboard/storeAuto/user/50449389">自动生成</a>
                <div class="contentHeader">
                  <div
                      style="
                      width: 340px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between; "
                  >

                  </div>
                  <div
                      style="
                      width: 360px;
                      display: flex;
                      align-content: center;
                      justify-content: space-between;
                    "
                  >
                    <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                        style="width: 250px"
                        size="small"
                        v-model="timerArray"
                        @change="queryList"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        range-separator="~"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>

                    <el-button class="buttonBtn" @click="handleTabClick"
                    >重置列宽
                    </el-button
                    >
                  </div>
                </div>
                <el-table border
                    :data="tableList"
                    style="width: 100%; background: #ebedf5"
                    :default-sort="{ prop: 'date', order: 'descending' }"
                >
                  <el-table-column
                      fixed
                      type="selection"
                      min-width="55"
                  ></el-table-column>
                  <el-table-column
                      fixed
                      prop="localComponents"
                      label="本地类组件"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="componentsType"
                      label="	组件类型"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="range"
                      label="投放范围"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="status"
                      label="状态"
                  ></el-table-column>

                  <el-table-column
                      prop="toShow"
                      label="展现"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="click"
                      label="	点击"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="avgClickPrice"
                      label="平均点击价格"
                      sortable
                      min-width="180"
                  ></el-table-column>
                  <el-table-column
                      prop="clickRate"
                      label="	点击率"
                      sortable
                      min-width="180"
                  ></el-table-column>
                </el-table>

                <el-pagination background
                    style="text-align: right; margin-top: 40px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                    layout="sizes, prev, pager, next,jumper"
                    :total="form.total"
                ></el-pagination>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import * as echarts from "echarts";
import {
  getPromotionCharactersClassList,
  getPromotionMarketingClassList,
  getPromotionGoodsClassList, getPromotionApplicationClassList, getPromotionLocalClassList
} from "@/services/model/managecenter";
import {getLocalStorageItem} from "@/utils/storage-helper";

export default {
  mixins: [ItemMixins],
  data() {
    return {
      isToggleStatus: false,
      chart: null,
      value: "下载",
      // 分页参数
      userInfo: getLocalStorageItem("userInfo"),

      form: {
        charactersClassType: '自定义创建', // 确保有初始值
        marketingType:'电话',
        userId: getLocalStorageItem("userInfo").userId,
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      options2: [
        {
          value: "下载",
          label: "下载",
        },
        {
          value: "发送邮箱",
          label: "发送邮箱",
        },
        {
          value: "下载设置",
          label: "下载设置",
        },
      ],
      options: [
        {
          value: 0,
          label: "合计",
        },
        {
          value: 1,
          label: "分时",
        },
        {
          value: 2,
          label: "分日",
        },
        {
          value: 3,
          label: "分周",
        },
        {
          value: 4,
          label: "分月",
        },
      ],
      isSelect: "账户整体",
      activeName: "first",
    };
  },
  mounted() {
    this.queryList();
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
      // 清空
      this.form = {
        userId: getLocalStorageItem("userInfo").userId,
        pageNum: 1,
        pageSize: 20,
        total: 0,
        charactersClassType: '自定义创建', // 确保有初始值
        marketingType:'电话',
      };

      (this.timerArray = [new Date(), new Date()]), // 初始化为 null 或合适的日期值，;
          this.queryList();
    },
    // 关键词
    async queryList() {

      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let res = [];
      this.tableList = [];
      res =
          this.activeName === "first"
              ? await getPromotionCharactersClassList(this.form)
              : this.activeName === "second"
              ? await getPromotionMarketingClassList(this.form)
              : this.activeName === "third"
                  ? await getPromotionGoodsClassList(this.form)
                  : this.activeName === "four"
                      ? await getPromotionApplicationClassList(this.form)
                      : await getPromotionLocalClassList(this.form)
       const modifiedArray = this.replaceNullWithDash( res.rows);
                this.tableList = modifiedArray|| [];
       this.form.total = Math.ceil(Number(res.total) );;
    },
  },
};
</script>
<style>
</style>
<style scoped lang="less">
.fcRightBox {
  height: 100%;

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .left-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }
      }

      .right-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background-color: rgb(255, 255, 255);
    padding: 0px 24px 24px;
    border-radius: 6px;
    margin-bottom: 42px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6;
      }
    }
  }
}
</style>
<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67c23a;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  background-color: rgb(255, 255, 255);

.el-input__inner {
  height: 32px;
  line-height: 32px;
}

}
.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buttonAdd {
  background: #0054e6;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.buttonDis {
  background: #dce9ff;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.buttonDis:hover {
  background: #dce9ff;
  color: white;

}

.buttonBtn {
  background: #e2e6f0;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.refresh-operation {
  width: 32px;
  align-items: center;
}

.one-button-normal {
  background-color: #ebedf5;
  color: rgba(19, 22, 26, 0.9);
  border: 1px solid transparent;
}

.one-button-medium {
  font-size: 14px;
}

.interpret-container {
  width: 100%;
  border-radius: 6px;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 30px;
  background-image: linear-gradient(to bottom right, #bfe8ff -50%, #fff 35%);
  background-color: #fff;
  background-repeat: no-repeat;
  margin-bottom: 8px;
}

.interpret-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.interpret-container .interpret-header-logo {
  width: 21px;
  height: 21px;
  margin-right: 10px;
}

.interpret-container .interpret-content {
  margin-top: 10px;
  border-radius: 10px;
  border-left: 2px solid #729cfe;
  background: #e5eeff;
  box-sizing: border-box;
  padding: 10px 30px;
}

.interpret-container .interpret-content > div::marker {
  color: #729cfe;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}

.headerBtn {
  height: auto;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  color: #13161AE6;
  border-right: 1px solid #d3d9e6;
}

.headerBox {
  margin: 10px 0;
  margin-bottom: 20px;
}

.btnOn {
  color: #0054e6;
}
.one-alert-show-icon {
  position: relative;
}
.one-alert-no-title {
  padding: 4px 16px;
}
.one-alert {
  border-width: 1px;
  border-style: solid;
}
.one-alert-medium .one-alert-icon, .one-alert-medium .one-alert-content {
  font-size: 14px;
}
.one-alert-info .one-alert-icon {
  color: #0054e6;
}
.one-alert-show-icon .one-alert-icon {
  position: absolute;
  left: 16px;
  line-height: 1.6;
  height: 1.6em;
}

.one-alert-content {
  color: rgba(19, 22, 26, 0.9);
  line-height: 1.6;
}
.one-alert-medium.one-alert-show-icon {
  padding-left: 38px;
}
.one-alert-medium {
  border-radius: 4px;
}
.one-alert-info {
  background-color: #ebf2ff;
  border-color: transparent;
}
.one-alert-show-icon {
  position: relative;
}
.one-alert-no-title {
  padding: 4px 16px;
}
.one-alert {
  border-width: 1px;
  border-style: solid;
}
</style>
